<template>
  <view class="settlement-records">
    <!-- Tab切换 -->
    <view class="tabs">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="tab-item"
        :class="{ active: activeTab === index }"
        @click="handleTabChange(index)"
      >
        {{ tab.name }}
      </view>
    </view>

    <!-- 记录列表 -->
    <scroll-view 
      scroll-y 
      class="record-list"
      @scrolltolower="handleLoadMore"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="handleRefresh"
    >
      <!-- 空状态 -->
      <view v-if="recordList.length === 0 && !loading" class="empty-state">
        <view class="empty-icon">💰</view>
        <view class="empty-text">暂无结算记录</view>
      </view>

      <!-- 记录卡片 -->
      <view 
        v-for="record in recordList" 
        :key="record.id"
        class="record-card"
      >
        <!-- 头部 -->
        <view class="card-header">
          <view class="left">
            <text class="icon">{{ getCategoryIcon(record.categoryName) }}</text>
            <text class="name">{{ record.categoryName }}</text>
          </view>
          <view class="status" :style="{ color: getStatusColor(record.settlementStatus) }">
            {{ record.settlementStatusText }}
          </view>
        </view>

        <!-- 订单信息 -->
        <view class="record-info">
          <view class="info-item">
            <text class="label">订单号:</text>
            <text class="value">{{ record.orderNo }}</text>
          </view>
          
          <!-- 正常订单显示跑腿费和平台费 -->
          <template v-if="record.status !== 8">
            <view class="info-item">
              <text class="label">跑腿费:</text>
              <text class="value">¥{{ record.totalAmount || record.actualAmount }}</text>
            </view>
            <view class="info-item">
              <text class="label">平台费:</text>
              <text class="value">-¥{{ record.platformFee }}</text>
            </view>
          </template>
          
          <!-- 退款订单显示补偿信息 -->
          <template v-else>
            <view class="info-item">
              <text class="label">原订单金额:</text>
              <text class="value">¥{{ record.actualAmount }}</text>
            </view>
            <view class="info-item">
              <text class="label">补偿金额:</text>
              <text class="value">¥{{ record.compensationAmount || record.riderEarning }}</text>
            </view>
          </template>
          
          <view class="info-item highlight">
            <text class="label">{{ record.status === 8 ? '补偿收益:' : '我的收益:' }}</text>
            <text class="value">¥{{ record.riderEarning }}</text>
          </view>
        </view>

        <!-- 时间信息 -->
        <view class="time-info">
          <view class="time-item" v-if="record.confirmTime">
            <text class="label">完成时间:</text>
            <text class="value">{{ record.confirmTime }}</text>
          </view>
          <view class="time-item" v-if="record.settlementApplyTime">
            <text class="label">申请时间:</text>
            <text class="value">{{ record.settlementApplyTime }}</text>
          </view>
          <view class="time-item" v-if="record.settlementTime">
            <text class="label">结算时间:</text>
            <text class="value">{{ record.settlementTime }}</text>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="card-actions" v-if="record.settlementStatus === 0">
          <button class="btn-apply" @click="handleApply(record)">申请结算</button>
        </view>
      </view>

      <!-- 加载更多 -->
      <view v-if="loading" class="loading-more">加载中...</view>
      <view v-else-if="!hasMore && recordList.length > 0" class="no-more">没有更多了</view>
    </scroll-view>
  </view>
</template>

<script>
import { getSettlementRecords } from '@/api/pickup'

export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        { name: '全部', status: null },
        { name: '未结算', status: 0 },
        { name: '申请中', status: 1 },
        { name: '已结算', status: 2 }
      ],
      recordList: [],
      loading: false,
      refreshing: false,
      hasMore: true,
      page: {
        current: 1,
        size: 10
      }
    }
  },
  onLoad() {
    this.loadRecords()
  },
  onShow() {
    // 从申请结算页返回时刷新
    this.loadRecords(true)
  },
  methods: {
    // 加载结算记录
    async loadRecords(refresh = false) {
      if (this.loading) return
      
      if (refresh) {
        this.page.current = 1
        this.hasMore = true
        this.recordList = []
      }

      try {
        this.loading = true
        const params = {
          current: this.page.current,
          size: this.page.size
        }
        
        // 只有当 settlementStatus 不为 null 时才添加
        if (this.tabs[this.activeTab].status !== null) {
          params.settlementStatus = this.tabs[this.activeTab].status
        }
        
        const pageData = await getSettlementRecords(params)
        
        if (refresh) {
          this.recordList = pageData.records
        } else {
          this.recordList = [...this.recordList, ...pageData.records]
        }
        
        this.hasMore = this.page.current < pageData.pages
      } catch (error) {
        console.error('加载记录失败:', error)
        uni.showToast({ title: error.msg || '加载失败', icon: 'none' })
      } finally {
        this.loading = false
        this.refreshing = false
      }
    },

    // Tab切换
    handleTabChange(index) {
      this.activeTab = index
      this.loadRecords(true)
    },

    // 下拉刷新
    handleRefresh() {
      this.refreshing = true
      this.loadRecords(true)
    },

    // 加载更多
    handleLoadMore() {
      if (this.hasMore && !this.loading) {
        this.page.current++
        this.loadRecords()
      }
    },

    // 申请结算
    handleApply(record) {
      uni.navigateTo({
        url: `/pages/settlement/apply?orderId=${record.id}`
      })
    },

    // 获取分类图标
    getCategoryIcon(categoryName) {
      const iconMap = {
        '取外卖': '🍱',
        '取快递': '📦',
        '取咖啡': '☕',
        '代买': '🛒'
      }
      return iconMap[categoryName] || '📦'
    },

    // 获取状态颜色
    getStatusColor(status) {
      const colorMap = {
        0: '#FF9800', // 未结算
        1: '#2196F3', // 申请中
        2: '#4CAF50'  // 已结算
      }
      return colorMap[status] || '#666'
    }
  }
}
</script>

<style scoped>
.settlement-records {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #F5F5F5;
}

.tabs {
  display: flex;
  background: #fff;
  padding: 0 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 28rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #4ECDC4;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 6rpx;
  background: #4ECDC4;
  border-radius: 3rpx;
}

.record-list {
  flex: 1;
  padding: 24rpx;
}

.empty-state {
  padding: 200rpx 0;
  text-align: center;
}

.empty-icon {
  font-size: 120rpx;
  margin-bottom: 24rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

.record-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  padding-bottom: 24rpx;
  border-bottom: 1rpx solid #F0F0F0;
}

.card-header .left {
  display: flex;
  align-items: center;
}

.card-header .icon {
  font-size: 40rpx;
  margin-right: 12rpx;
}

.card-header .name {
  font-size: 30rpx;
  font-weight: bold;
}

.card-header .status {
  font-size: 26rpx;
  font-weight: bold;
}

.record-info {
  background: #F8F9FA;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12rpx;
  font-size: 26rpx;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item .label {
  color: #666;
}

.info-item .value {
  color: #333;
  font-weight: 500;
}

.info-item.highlight {
  padding-top: 12rpx;
  border-top: 1rpx solid #E0E0E0;
  margin-top: 12rpx;
}

.info-item.highlight .label,
.info-item.highlight .value {
  color: #4ECDC4;
  font-weight: bold;
  font-size: 28rpx;
}

.time-info {
  margin-bottom: 16rpx;
}

.time-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
  font-size: 24rpx;
}

.time-item:last-child {
  margin-bottom: 0;
}

.time-item .label {
  color: #999;
}

.time-item .value {
  color: #666;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
}

.btn-apply {
  padding: 16rpx 48rpx;
  background: linear-gradient(135deg, #4ECDC4, #44A08D);
  color: #fff;
  font-size: 26rpx;
  border-radius: 32rpx;
  border: none;
}

.loading-more,
.no-more {
  text-align: center;
  padding: 32rpx;
  font-size: 24rpx;
  color: #999;
}
</style>

